<!-- 首页Banner图 -->
<template>
  <el-main class="base_main_content">
    <div>最多添加5个，最少保留1个</div>
    <div class="base_main_margin_top">
      <DynamicParams ref="bannerParams" :showDefault="false" :customAdd="true" :customDel="true" :customMove="true"
        :operation="{ add:true,modify:true,move:true,del:true }" :data="data" @add="addBanner" @delete="delBanner"
        @modify="modifyBanner" @move="sortBanner" addText="添加Banner">
        <el-table-column label="Banner图片" align="center">
          <template #default="scope">
            <el-image fit="contain" :src="scope.row.bannerPic" :style="{
              // width: '250px',
              height: '200px',
            }"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="跳转类型" align="center" width="150px">
          <template #default="scope">
            <span>{{ scope.row.typeValue }}</span>
          </template>
        </el-table-column>
      </DynamicParams>
    </div>
    <el-drawer custom-class="base_drawer" v-model="drawer" :close-on-click-modal="false" :title="title"
      :with-header="true" :size="850">
      <div class="content">
        <div class="base_details_content_second">
          <el-form ref="basicFormRef" :model="basicForm" :rules="basicRules" label-width="100px"
            class="base_details_form">
            <el-form-item label="Banner图片" prop="bannerPic">
              <UploadPicture v-model="basicForm.bannerPic" :limit="1" :imgSize="$.bannerImgSize()"
                      :fileSize="$.imgFileSize()" />
            </el-form-item>
            <el-form-item label="跳转类型" prop="linkToType">
              <el-radio-group v-model="basicForm.linkToType" @change="linkToTypeChange">
                <el-radio v-for="(item, index) in typeOptions" :key="index" :label="item.id">{{ item.name }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-input v-if="linkToType != 'link' && linkToType" v-model="basicForm.product.name" placeholder="添加商品">
                <template #append>
                  <el-button @click="openChooseProduct" type="primary">添加商品</el-button>
                </template>
              </el-input>
              <el-input v-if="linkToType == 'link'" v-model="basicForm.link" placeholder="链接地址"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
        <div>
          <el-button @click="closeDrawer">取消</el-button>
          <el-button type="primary" @click="saveBanner">保存</el-button>
        </div>
      </template>
    </el-drawer>
    <ChooseProduct ref="chooseProductRef" @chooseProduct="chooseProduct"></ChooseProduct>
  </el-main>
</template>

<script setup>
import { ref } from "vue";
import DynamicParams from "@com/DynamicParams.vue";
import ChooseProduct from "@com/marketing/ChooseProduct.vue";
import $ from "@util/base";
import { $msg, $box } from "@ui/msg";
import api from "@api/homepage";

const data = ref([]);
const typeName = "banner"

const bannerParams = ref(null);
const modifyIndex = ref(null);
let type = "add";

function showAddBanner(index) {
  openDrawer();
  if (index != undefined) {
    modifyIndex.value = index;
    type = "modify";
    title.value = "修改Banner";
  } else {
    modifyIndex.value = null;
    type = "add";
    title.value = "新增Banner";
    basicForm.value = {
      id: null,
      bannerPic: [],
      linkToType: null,
      linkToItem: null,
      product: {
        code: null,
        name: null,
      },
      link: null,
    };
  }
}
function addBanner() {
  if (bannerParams.value.getValue().length < 5) {
    showAddBanner();
  } else {
    $msg.error("最多添加5个");
  }
}
function delBanner(index) {
  if (bannerParams.value.getValue().length == 1) {
    $msg.error("最少保留1个");
    return false;
  } else {
    let data = bannerParams.value.getValue()[index];
    $box.open("删除确认", "是否删除", () => {
      api.del(typeName, data.id, () => {
        $msg.succ("删除成功");
        getData();
      });
    });
  }
}

function modifyBanner(index) {
  showAddBanner(index);
  setDetailsData(index);
}

function sortBanner(data) {
  let idList = data.map((e) => {
    return e.id;
  });
  api.sort(typeName, idList.reverse(), () => {
    $msg.succ("排序修改成功");
    getData();
  });
}

function setDetailsData(index) {
  let data = bannerParams.value.getValue()[index];
  basicForm.value.id = data.id;
  basicForm.value.bannerPic = [data.bannerPic];
  basicForm.value.linkToType = data.linkToType;
  basicForm.value.linkToItem = data.linkToItem;
  linkToTypeChange(data.linkToType);
  if (linkToType.value == "link") {
    basicForm.value.link = data.linkToItem;
  }
  if (
    linkToType.value == "goods" ||
    linkToType.value == "travel" ||
    linkToType.value == "hotel" ||
    linkToType.value == "gift"
  ) {
    basicForm.value.product.code = data.linkToItem;
    basicForm.value.product.name = data.linkToItemName;
  }
}
const title = ref("新增Banner");
const drawer = ref(false);
function openDrawer() {
  drawer.value = true;
}
function closeDrawer() {
  drawer.value = false;
}

const typeOptions = [
  { id: "1024001", name: "无" },
  { id: "1024002", name: "商品" },
  { id: "1024003", name: "旅行" },
  { id: "1024004", name: "酒店" },
  { id: "1024006", name: "礼包" },
  { id: "1024005", name: "链接" },
];

const basicFormRef = ref(null);
const basicForm = ref({
  id: null,
  bannerPic: [],
  linkToType: null,
  linkToItem: null,
  product: {
    code: null,
    name: null,
  },
  link: null,
});

const basicRules = {
  bannerPic: [
    {
      required: true,
      message: "请上传Banner图片",
      trigger: "blur",
    },
  ],
  linkToType: [
    {
      required: true,
      message: "请选择跳转类型",
      trigger: "blur",
    },
  ],
};

const linkToType = ref(null);
function linkToTypeChange(val) {
  basicForm.value.product = {
    code: null,
    name: null,
  };
  basicForm.value.link = null;
  switch (val) {
    case "1024001":
      linkToType.value = null;
      break;
    case "1024002":
      linkToType.value = "goods";
      break;
    case "1024003":
      linkToType.value = "travel";
      break;
    case "1024004":
      linkToType.value = "hotel";
      break;
    case "1024005":
      linkToType.value = "link";
      break;
    case "1024006":
      linkToType.value = "gift";
      break;
  }
}

const chooseProductRef = ref(null);
function openChooseProduct() {
  chooseProductRef.value.show(linkToType.value);
}

function chooseProduct(data) {
  basicForm.value.product.code = data.code;
  basicForm.value.product.name = data.name;
}

function checkLinkToItem() {
  if (linkToType.value == "link" && $.isNull(basicForm.value.link)) {
    $msg.error("请输入链接地址");
    return false;
  }
  if (
    (linkToType.value == "goods" ||
      linkToType.value == "travel" ||
      linkToType.value == "hotel" ||
      linkToType.value == "gift") &&
    $.isNull(basicForm.value.product.code)
  ) {
    $msg.error("请选择商品");
    return false;
  }
  return true;
}

function saveBanner() {
  basicFormRef.value.validate((valid) => {
    if (valid && checkLinkToItem()) {
      let form = $.deepCopy(basicForm.value);
      form.bannerPic = form.bannerPic[0];
      if (linkToType.value == "link") {
        form.linkToItem = form.link;
      }
      if (
        linkToType.value == "goods" ||
        linkToType.value == "travel" ||
        linkToType.value == "hotel" ||
        linkToType.value == "gift"
      ) {
        form.linkToItem = form.product.code;
      }
      delete form.link;
      delete form.product;
      $.handleCRU(type, {
        add: () => {
          delete form.id;
          addData(form);
        },
        modify: () => {
          modifyData(form);
        },
      });
    }
  });
}

function addData(form) {
  api.add(typeName, form, () => {
    $msg.succ("新增成功");
    closeDrawer();
    getData();
  });
}
function modifyData(form) {
  api.update(typeName, form, () => {
    $msg.succ("修改成功");
    closeDrawer();
    getData();
  });
}

getData();
function getData() {
  api.list(typeName, (val) => {
    // data.value = [
    //   {
    //     id: 2,
    //     bannerPic:
    //       "https://cwimgtest.oss-cn-beijing.aliyuncs.com/img/20221001/9db7dc8d9b8948fb80543beca53ee4bb.jpeg",
    //     sortNum: 200,
    //     linkToType: "1024001",
    //     linkToItem: null,
    //     linkToItemName: null,
    //   },
    //   {
    //     id: 1,
    //     bannerPic:
    //       "https://cwimgtest.oss-cn-beijing.aliyuncs.com/img/20221001/80bd4c9f3fe343cd909bbdf91172aa09.jpg",
    //     sortNum: 100,
    //     linkToType: "1024003",
    //     linkToItem: "8111050",
    //     linkToItemName: "暗示法",
    //   },
    // ];
    data.value = val.list.map(e => {
      // 1024001 无、1024002 商品、1024003 旅行、1024004 酒店、1024005 链接
      switch (e.linkToType) {
        case "1024001":
          e.typeValue = "无"
          break
        case "1024002":
          e.typeValue = "商品"
          break
        case "1024003":
          e.typeValue = "旅行"
          break
        case "1024004":
          e.typeValue = "酒店"
          break
        case "1024005":
          e.typeValue = "链接"
          break
        case "1024006":
          e.typeValue = "礼包"
          break
      }
      return e
    })
  });
}
</script>

<style lang="scss">
.home_page_dialog {
  .content {
    height: 50vh;
    overflow: auto;
  }

  /* 禁用全选 */
  .el-table__header-wrapper .el-table-column--selection {
    text-indent: -999999px;
  }
}
</style>
